<template>
    <common-search :col-layout="{xxl: 6, xl:8, lg: 8, md: 12, sm: 24, xs: 24}" v-model="query" :formItems="formItems" @search="search" @reset="reset"></common-search>
    <a-button type="primary" @click="addForm = true"  v-modulePerm="['consignee:add']">新增提货人</a-button>
    <common-table
        :columns="columns"
        :dataSource="dataList"
        v-model:localPagination="page"
        @paginationChange="onPageChange"
        v-model:loading="loading"
        :scroll="{ x: 'max-content'}"
        :slots="['action']"
    >
      <template #action="{ record }">
        <a @click="editForm = true; editRecord = record" v-modulePerm="['consignee:edit']">编辑</a>
        <a-divider type="vertical"></a-divider>
        <a-popconfirm
            title="是否要删除？"
            ok-text="是"
            cancel-text="否"
            @confirm="handleDel(record)"
        >
          <a v-modulePerm="['consignee:delete']">删除</a>
        </a-popconfirm>
      </template>
    </common-table>
    <add-form :form-item="formItem" :rules="rules" :add-form="addForm" :ref="addFormRef" @submit="submit" @close="close"/>
    <edit-form :record="editRecord" :form-item="formItem" :rules="rules" :edit-form="editForm" :ref="editFormRef" @submit="handleEdit" @close="closeEdit"/>
</template>
<script>
export default {
  name:"tail-consignee"
}
</script>
<script setup>
import CommonSearch from "@/components/commonSearch/index.vue";
import CommonTable from "@/components/commonTable/index.vue";
import {useSearchTable} from "@/hooks/table/useSearchTable";
import { ref} from "vue";
import {message} from "ant-design-vue";
import AddForm from "@/views/upload/components/addForm.vue";
import {addCarrier, editCarrier, getCarrierList} from "@/api/tail/consignee.js";
import EditForm from "@/views/upload/components/editForm.vue";
import {deleteOne} from "@/api/system/index.js";
const columns = [
  {
    title: "编码",
    dataIndex: "carrierCode",
    key: "carrierCode",
    align: 'center',
  },
  {
    title: "提货人",
    dataIndex: "carrier",
    key: "carrier",
    align: 'center'
  },
  {
    title: '提货人联系方式',
    dataIndex: 'contact',
    key: 'contact',
    align: 'center'
  },
  {
    title: '提货人邮箱',
    dataIndex: 'email',
    key: 'email',
    align: 'center'
  },
  {
    title: '收货人姓名',
    dataIndex: 'shipToName',
    key: 'shipToName',
    align: 'center'
  },
  {
    title: '收货人地址',
    dataIndex: 'shipToAddress',
    key: 'shipToAddress',
    align: 'center'
  },
  {
    title: '收货人城市/州/邮编',
    dataIndex: 'shipToCityStateZip',
    key: 'shipToCityStateZip',
    align: 'center'
  },
  {
    title: '操作',
    key: 'action',
    dataIndex: 'action',
    align: "center"
  }
];
const formItems = ref([
  {
    label: '提货人',
    field: 'carrier',
    type: 'input',
  },
]);
const formItem = ref([
  {
    label: '编码',
    value: 'carrierCode',
    type: 'input',
  },
  {
    label: '提货人',
    value: 'carrier',
    type: 'input',
  },
  {
    label: '联系方式',
    value: 'contact',
    type: 'input',
  },
  {
    label: '邮箱',
    value: 'email',
    type: 'input',
  },
  {
    label: '姓名',
    value: 'shipToName',
    type: 'input',
  },
  {
    label: '地址',
    value: 'shipToAddress',
    type: 'input',
  },
  {
    label: '城市/州/邮编',
    value: 'shipToCityStateZip',
    type: 'input',
  },
]);
const exportLoading = ref(false);
const addForm = ref(false);
const editForm = ref(false);
const addFormRef = ref();
const editFormRef = ref();
const editRecord = ref({});
const rules = {
  carrierCode:[
    {
      required: true,
      message: '请输入提货人编码',
      trigger: 'blur'
    }
  ],
  carrier:[
    {
      required: true,
      message: '请输入搬运人',
      trigger: 'blur'
    }
  ],
  contact:[
    {
      required: true,
      message: '请输入联系方式',
      trigger: 'blur'
    }
  ],
}
const { dataList, query, loading, page, search, reset, onPageChange } = useSearchTable({
  searchAPI: getCarrierList,
  queryFactory: () => ({
  })
});

const handleDel = async (record) => {
  try{
    const res = await deleteOne('/wms/carrier/remove',{carrierCode:record.carrierCode})
    message.success('删除成功');
    await search(page.value.pageNo)
  }catch (e) {
    message.error(e);
  }
}

const submit = async (form) => {
  try{
    for (let formKey in form) {
      if(form[formKey] === undefined || form[formKey] === null){
        form[formKey] = ''
      }
    }
    const res = await addCarrier(form)
    message.success('新增成功');
    close()
    await search()
  }catch (e){
    message.error(e);
  }
}
const handleEdit = async (form) => {
  try{
    for (let formKey in form) {
      if(form[formKey] === undefined || form[formKey] === null){
        form[formKey] = ''
      }
    }
    const res = await editCarrier(form)
    closeEdit()
    message.success('修改成功');
    await search()
  }catch (e) {
    message.error(e);
  }
}
const close = () => {
  addForm.value = false;
}
const closeEdit = () => {
  editForm.value = false;
}
</script>
<style scoped>

</style>
